<script setup>
import { onMounted, ref, h } from 'vue'
import { MotionComponent } from '@vueuse/motion'
import AntdIcon from '@/components/AntdIcon/index.vue'
import { appointmentListApi, updateAppointmentApi } from '@/service'
import { message, Modal } from 'ant-design-vue'
import { exportExcel } from '@/utils'

const globalList = ref([])
const searchObj = ref({
  page: 1,
  page_size: 2,
  appointment_name: '',
  appointment_phone: '',
  is_deal: null,
})
const total = ref(0)

const getGlobalList = () => {
  appointmentListApi(searchObj.value).then((res) => {
    globalList.value = res.items
    total.value = res.total_count
  })
}

const search = () => {
  searchObj.value.page = 1
  getGlobalList()
}

const paginationChange = (page, size) => {
  searchObj.value.page = page
  searchObj.value.page_size = size
  getGlobalList()
}

// 操作
const delGlobal = ({ id, is_deal, appointment_name }, index) => {
  Modal.confirm({
    title: '操作提示',
    content: h('p', [
      h('span', {}, `确认要改变 ${appointment_name} 的状态为 `),
      h(
        'span',
        {
          style: {
            color: is_deal === 0 ? '#1677ff' : '#f40',
            fontWeight: 'bold',
          },
        },
        `${is_deal === 0 ? '已处理' : '待处理'}`,
      ),
      h('span', {}, ` 吗？`),
    ]),
    okText: '确认',
    cancelText: '取消',
    onOk: () => {
      console.log(id, is_deal)
      updateAppointmentApi({ appointment_id: id, is_deal: is_deal === 0 ? 1 : 0 }).then(() => {
        globalList.value[index].is_deal = is_deal === 0 ? 1 : 0
        message.success('操作成功')
      })
    },
  })
}

// 导出并下载为 Excel 表格
const dcE = () => {
  searchObj.value.page_size = total.value
  appointmentListApi(searchObj.value).then((res) => {
    // 处理数据匹配字段名
    let newData = res.items.map((item) => {
      return {
        编号: item.id,
        姓名: item.appointment_name,
        联系方式: item.appointment_phone,
        创建时间: item.create_time,
        状态: item.is_deal === 0 ? '待处理' : '已处理',
      }
    })
    exportExcel(newData, '预约记录表')
  })
}

onMounted(() => {
  getGlobalList()
})
</script>
<template>
  <div class="flex flex-col gap-5">
    <a-card :bordered="false">
      <a-form ref="formRef" :model="searchObj" autocomplete="off">
        <div class="grid grid-cols-5 gap-5">
          <a-form-item label="姓名">
            <a-input v-model:value="searchObj.appointment_name" placeholder="请输入姓名" />
          </a-form-item>
          <a-form-item label="手机号">
            <a-input v-model:value="searchObj.appointment_phone" placeholder="请输入手机号" />
          </a-form-item>
          <a-form-item label="状态">
            <a-select v-model:value="searchObj.is_deal" placeholder="请选择">
              <a-select-option :value="null"> 全部 </a-select-option>
              <a-select-option value="1"> 已处理 </a-select-option>
              <a-select-option value="0"> 待处理 </a-select-option>
            </a-select>
          </a-form-item>
          <div class="flex gap-5">
            <a-button class="flex-1" type="primary" @click="search">搜索</a-button>
            <a-button class="flex-1" @click="dcE">导出</a-button>
          </div>
        </div>
      </a-form>
    </a-card>
    <MotionComponent preset="slideVisibleOnceRight">
      <a-card :bordered="false">
        <a-table :data-source="globalList" :pagination="false" bordered>
          <a-table-column key="id" title="#" data-index="id" />
          <a-table-column key="appointment_name" title="姓名" data-index="appointment_name" />
          <a-table-column key="appointment_phone" title="联系方式" data-index="appointment_phone" />
          <a-table-column key="create_time" title="创建时间" data-index="create_time" />
          <a-table-column key="is_deal" title="状态" data-index="is_deal">
            <template #default="{ text: is_deal }">
              <a-tag :color="is_deal == 0 ? 'error' : 'processing'" :bordered="false">
                {{ is_deal == 0 ? '待处理' : '已处理' }}
              </a-tag>
            </template>
          </a-table-column>
          <a-table-column key="update_time" title="更新时间" data-index="update_time" />
          <a-table-column key="action" title="操作">
            <template #default="{ record, index }">
              <a-button
                type="primary"
                :danger="record.is_deal == 1"
                @click="delGlobal(record, index)"
              >
                <template #icon>
                  <AntdIcon :icon="record.is_deal == 0 ? 'CheckOutlined' : 'CloseOutlined'" />
                </template>
              </a-button>
            </template>
          </a-table-column>
        </a-table>
        <div class="mt-5 w-full flex justify-end">
          <a-pagination
            v-model:current="searchObj.page"
            v-model:pageSize="searchObj.page_size"
            show-size-changer
            :pageSizeOptions="['5', '10', '20']"
            :total="total"
            :show-total="(total) => `共 ${total} 条数据`"
            @change="paginationChange"
          />
        </div>
      </a-card>
    </MotionComponent>
  </div>
</template>
